<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">位置</el-breadcrumb-item>
        <el-breadcrumb-item>产品管理</el-breadcrumb-item>
        <el-breadcrumb-item>产品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>

    <el-button type="primary" size="mini" @click="dialogFormVisible=true">新增</el-button>
    <el-table :data="tableData" height="450px" border style="width: 100%">
        <el-table-column prop="productCode" label="产品编号" width="100"></el-table-column>
        <el-table-column prop="name" label="产品名称" width="120"></el-table-column>
        <el-table-column prop="unitName" label="数量单位" width="120"></el-table-column>
        <el-table-column prop="createDate" label="添加日期" width="120"></el-table-column>
        <el-table-column prop="price" label="销售价" width="100"></el-table-column>
        <el-table-column prop="remark" label="产品描述" width="120"></el-table-column>
        <el-table-column prop="num" label="产品数量" width="120"></el-table-column>
        <el-table-column prop="poNum" label="采购在途数" width="100"></el-table-column>
        <el-table-column prop="soNum" label="销售在途数" width="100"></el-table-column>
        <el-table-column prop="categoryName" label="产品类别名称" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-button type="text" size="medium" @click="del(scope.row)">删除</el-button>
                <el-button type="text" size="medium" @click="handleClick(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :page-sizes="[5, 8, 16, 32, 100]"
            :page-size="pageSize"
            :currentPage="currentPage"
            :total="totalRecord"  >
    </el-pagination>

    <!--新增产品弹框-->
    <el-dialog title="新增产品列表" :visible.sync="dialogFormVisible" width="600px" top="80px">
        <el-form label-width="200px">
            <el-form-item label="产品编号:" >
                <el-input v-model="productCode"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品名称:">
                <el-input v-model="name"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="数量单位:">
                <el-input v-model="unitName"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="销售价:">
                <el-input v-model="price"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品描述:">
                <el-input v-model="remark"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品数量:">
                <el-input v-model="num" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="采购在途数:">
                <el-input v-model="poNum"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="销售在途数:">
                <el-input v-model="soNum"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品类别名称:">
                <el-select v-model="categoryId" autocomplete="off" placeholder="请选择">
                    <el-option
                            v-for="category in categoryList"
                            :label="category.name"
                            :value="category.categoryID">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: -50px">
            <el-button @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="addSure" size="small">确 定</el-button>
        </div>
    </el-dialog>
    <!--修改产品弹框-->
    <el-dialog title="修改列表" :visible.sync="dialogFormVisible1" width="500px" top="80px">
        <el-form label-width="200px">
            <el-form-item label="产品编号:" >
                <el-input v-model="productCode"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品名称:">
                <el-input v-model="name"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="数量单位:">
                <el-input v-model="unitName"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="销售价:">
                <el-input v-model="price"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品描述:">
                <el-input v-model="remark"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品数量:">
                <el-input v-model="num" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="采购在途数:">
                <el-input v-model="poNum"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="销售在途数:">
                <el-input v-model="soNum"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品类别名称:">
                <el-select v-model="categoryId" autocomplete="off" placeholder="请选择">
                    <el-option v-for="category in categoryList"
                               :label="category.name"
                               :value="category.categoryId"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: -50px">
            <el-button @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="updSure" size="small">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: "#app",
            data:{
                labelPosition:"left",
                dialogFormVisible:false,
                dialogFormVisible1:false,
                tableData:[],
                categoryList:[],
                productCode:"",
                name:"",
                unitName:"",
                price:"",
                createDate:"",
                remark:"",
                num:"",
                poNum:"",
                soNum:"",
                categoryName:"",
                categoryId:"",
                currentPage:1,
                totalRecord:0,
                pageSize:5
            },
            methods:{
                init:function (){
                    let that = this;
                    axios({
                        method:"get",
                        url:"getProducts?currentPage="+that.currentPage+"&pageSize="+that.pageSize
                    }).then(function (resp){
                        console.log(resp.data.lists)
                        that.tableData=resp.data.lists;
                        //设置总条数
                        that.totalRecord=resp.data.totalRecord;
                    });
                    axios({
                        method:"get",
                        url:"getCatAll"
                    }).then(function (resp){
                        that.categoryList=resp.data;
                    });
                },

                handleCurrentChange:function (val){
                    this.currentPage = val;
                    this.init();
                },
                handleSizeChange:function (val){
                    this.pageSize = val;
                    this.init();
                },
                handleClick:function (row){
                    this.productCode = row.productCode;
                    this.categoryId=row.categoryId;
                    this.name = row.name;
                    this.unitName=row.unitName;
                    this.price=row.price;
                    this.createDate=row.createDate;
                    this.remark=row.remark;
                    this.num=row.num;
                    this.poNum=row.poNum;
                    this.soNum=row.soNum;
                    this.categoryName=row.categoryName;
                    this.dialogFormVisible1 = true;
                },

                cancel:function () {
                    this.dialogFormVisible = false;
                    this.dialogFormVisible1 = false;
                    this.clear();
                    this.$message({
                        showClose: true,
                        message: '你已成功取消',
                        duration: "1000"
                    });
                },
                clear:function (){
                    this.productCode=this.categoryId=this.name=this.unitName=this.price=this.remark=this.num=this.poNum=this.soNum="";
                },
                addSure:function (){
                    let that = this;
                    let proJson=
                        {
                            productCode:this.productCode,name:this.name,unitName:this.unitName,price:this.price,remark:this.remark,
                            num:this.num,poNum:this.poNum,soNum:this.soNum,categoryId:this.categoryId
                        };
                    axios.post("getAdd",proJson).then(function (resp){
                        that.clear();
                        that.init();
                        if(resp.data>0 && resp.data!=3) {
                            that.$message({
                                showClose: true,
                                message: '恭喜你，新增成功了',
                                type: 'success',
                                duration: "1000"
                            });
                        }else if(resp.data ==3){
                            that.$message({
                                showClose: true,
                                message: '该产品编号已存在',
                                type: 'success',
                                duration: "1000"
                            });
                        }else {
                            that.$message({
                                showClose: true,
                                message: '失败了',
                                type: 'success',
                                duration:"1000"
                            });
                        }
                    });
                    this.dialogFormVisible = false;
                },
                updSure:function (){
                    let that = this;
                    let product = {
                        productCode:this.productCode,name:this.name,unitName:this.unitName,price:this.price,remark:this.remark,
                        num:this.num,poNum:this.poNum,soNum:this.soNum,categoryId:this.categoryId
                    };
                    console.log(product);
                    axios.post("getUpd",product).then(function (resp){
                        that.clear();
                        that.init();
                        console.log(resp.data)
                            that.$message({
                                showClose: true,
                                message: '恭喜你，修改成功了',
                                type: 'success',
                                duration:"1000"
                            });
                    });
                    this.dialogFormVisible1 = false
                },
                del:function (row){
                    if(window.confirm("确认删除?")){
                        let that = this;
                        this.productCode = row.productCode;
                        axios.get("delProduct?productCode="+that.productCode).then(function (resp){
                            that.clear();
                            that.init();
                            console.log(resp.data)
                            if(resp.data>0){
                                that.$message({
                                    showClose: true,
                                    message: '恭喜你，删除成功',
                                    type: 'success',
                                    duration:"1000"
                                });
                            }else {
                                that.$message({
                                    showClose: true,
                                    message: '删除失败',
                                    type: 'success',
                                    duration:"1000"
                                });
                            }
                        });
                    }
                },
            }
        });
        vm.init();
    }
</script>